<template>
  <div class="coupons" :style="{ '--btn_color': btn_color }">
    <div class="title">
      <span></span>
      <div>商家信息</div>
      <span></span>
      <div class="triangle_left_border"></div>
      <div class="triangle_right_border"></div>
    </div>

    <div class="gift_pop">
      <vm-scrollbar tag="div" :wrapStyle="{ height: height + 'px' }">
        <div class="conter5" v-show="activityItem">
          <div>
            <span>名称:</span>
            <span>{{ activityItem.merchantname }}</span>
          </div>
          <div class="phone_os">
            <span>电话:</span>
            <span>{{ activityItem.mobile }}</span>
            <a :href="'tel:' + activityItem.mobile" style="margin-left: 10px">
              <van-icon
                name="phone-o"
                :color="activityItem.btn_color"
                size="16"
              />
            </a>
          </div>
          <!-- <div class="images">
          <span>图片:</span>
          <van-image
            width="60"
            height="60"
            :src="activityItem.cover"
          ></van-image>
        </div> -->
          <div class="adress_o">
            <span>地址:</span>
            <span>{{ activityItem.address }}</span>
            <span
              style="margin-left: 10px"
              @click="mapClick(activityItem.address)"
            >
              <!-- <a
                class="send"
                :href="
                  'http://api.map.baidu.com/geocoder?address=' +
                  activityItem.address +
                  '&output=html&src=webapp.baidu.openAPIdemo'
                "
                target="_blank"
                ><van-icon
                  name="location"
                  :color="activityItem.btn_color"
                  size="16"
              /></a> -->
              <!-- <span>导航</span> -->

              <van-icon
                name="location"
                :color="activityItem.btn_color"
                size="16"
              />
            </span>
          </div>
          <!-- <div >
          <span>logo:</span>
          <img :src="activityItem.cover" alt="">
        </div> -->
        </div>

        <nodata-piz v-show="!activityItem"></nodata-piz>
      </vm-scrollbar>
    </div>
  </div>
</template>

<script>
import { Icon } from "vant";
import NodataPiz from "./NodataPiz.vue";
export default {
  components: {
    [Icon.name]: Icon,
    NodataPiz,
  },
  props: {
    activityItem: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      btn_color: "",
      height: null,
    };
  },
  watch: {
    activityItem: {
      handler(val) {
        this.btn_color = val.btn_color;
      },
    },
  },
  created() {
    console.log(this.activityItem, "this.activityItem");
    this.btn_color =
      this.activityItem.btn_color || this.activityItem.theme_color;
    // console.log(this.btn_color);
    console.log(this.activityItem, "activityItem");
  },
  mounted() {
    // this.height= document.documentElement.clientHeight*0.32
    console.log(this.height, "activityItem");
  },
  methods: {
    mapClick(adress) {
      this.shareInit();
      this.getLal(adress, (res) => {
        this.openLocation(
          res.detail.addressComponents.street,
          res.detail.location.lat,
          res.detail.location.lng
        );
      });
    },
    shareInit() {
      const _this = this;
      const url = location.href.split("#")[0];
      let params = {
        url: url,
      };
      _this.$request.configJssdk(params).then((res) => {
        console.log(res, "-------------res");
        wx.config({
          debug: false, // 是否开启调试模式
          appId: res.data.appId, //appid
          timestamp: res.data.timestamp, // 时间戳
          nonceStr: res.data.nonceStr, // 随机字符串
          signature: res.data.signature, // 签名
          jsApiList: ["openLocation", "getLocation"], // 需要使用的JS接口列表
        });
      });
    },
    getLal(address, cb) {
      var geocoder = new qq.maps.Geocoder();
      geocoder.getLocation(address);
      geocoder.setComplete(function (res) {
        cb(res);
      });
      geocoder.setError(function (err) {
        cb(res);
      });
    },

    openLocation(name, lat, lng) {
      wx.openLocation({
        latitude: lat,
        longitude: lng,
        name: name,
        address: this.activityItem.address,
        scale: 14,
        infoUrl: "http://weixin.qq.com",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.coupons {
  margin: 3.5rem 0 1rem 0;
  // width: 90%;
  background-color: #fff;
  border-radius: 8px;
  padding: 1.5rem 1rem 1rem;
  box-sizing: border-box;
  position: relative;
  // padding-bottom: 11rem;
  .title {
    width: 12rem;
    height: 3rem;
    background: var(--btn_color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    line-height: 3rem;
    text-align: center;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 0.3rem;
    font-size: 1.4rem;
    span {
      display: inline-block;
      width: 1rem;
      height: 1rem;
      border-radius: 1rem;
      background-color: #ffdb89;
    }
    span:nth-child(1) {
      margin-right: 0.5rem;
    }
    span:nth-child(2) {
      margin-left: 0.2rem;
    }
    .triangle_left_border {
      width: 0;
      height: 0;
      border-bottom: 1.5rem solid var(--btn_color);
      border-left: 1.5rem solid transparent;
      position: absolute;
      left: 0%;
      top: 0%;
      margin-left: -1.5rem;
    }
    .triangle_right_border {
      width: 0;
      height: 0;
      border-bottom: 1.5rem solid var(--btn_color);
      border-right: 1.5rem solid transparent;
      position: absolute;
      left: 100%;
      top: 0%;
    }
  }

  .gift_pop {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    background-color: white;
    position: relative;
    padding: 2rem 0;

    .conter5 {
      display: flex;
      flex-direction: column;
      color: #333;
      font-size: 1.3rem;
      .adress_o {
        // display: flex;
      }
      // .phone_os {
      //   text-align: center;
      // a {
      //   // box-sizing: border-box;
      //   // display: inline-block;
      //   // width: 12px;
      //   // height: 12px;
      //   // text-align: center;
      //   // padding-top: 5px;
      // }
      // }
      :first-child {
        // margin-top: 10px;
      }
      div {
        margin-bottom: 1.8rem;
        :first-child {
          margin-right: 5px;
        }
      }
      .images {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>